<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #txt {
            width: 200px;
            height: 50px;
            border: 2px solid #dedede;
            background: #999;
            border-radius: 10px;
            color: white;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2 id="txt">01:00:00</h2>
    <button id="start">start</button>
    <button id="stop">stop</button>
    <button id="reset">reset</button>

</body>

</html>

<script>

    var txt = document.querySelector('#txt');
    var start = document.querySelector('#start');
    var stop = document.getElementById('stop');
    var reset = document.getElementById('reset');

    var haosecond = 99
    // console.log(res)
    var second = 59

    var minutes = 00
    var hm;

    var flag = true;

    function remove() {
        if (flag) {
            flag = !flag;
            hm = setInterval(() => {
                --haosecond;
                if (haosecond == 00) {
                    haosecond = 99;
                    // var miao = setInterval(()=>{
                    // })
                    --second;
                    // second+=second;
                    if (second == 00) {
                        second = 59;
                        --minutes;
                        if (minutes <= 0) {

                            minutes = 0;
                            second = 0;
                            haosecond = 0;
                        }
                    }
                }
                if (haosecond == 0 && second == 0 & minutes == 0) {
                    clearInterval(hm);
                }
                console.log(haosecond)
                console.log(second)
                console.log(minutes)

                txt.innerHTML = (minutes < 10 ? '0' + minutes : minutes) + ":" + (second < 10 ? '0' + second : second) + ':' + (haosecond < 10 ? "0" + haosecond : haosecond)
            }, 10)

        }

    }


    start.onclick = remove

    stop.onclick = function () {
        flag = true;
        clearInterval(hm)
    }

    reset.onclick = function () {
        flag = true;
        clearInterval(hm);
        haosecond = 99;
        minutes = 0;
        second = 59;
        txt.innerHTML = '00:60:00';

    }


</script>
